<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="text" class="username">
    <br> <br>
    <input type="password" class="userpwd">
    <br><br>
    <button class="btn">登陆</button>

    <script>

        // 账号信息存在cookie中

        // 判断是否可以登录   需要去cookie中找到相关想账号信息

        const oBtn = document.querySelector('.btn');
        const oUser = document.querySelector('.username');
        const oPwd = document.querySelector('.userpwd');

        oBtn.addEventListener('click', function () {
            // 获取用户名和密码
            const username = oUser.value;
            const userpwd = oPwd.value;

            // 验证  。。。此处省略一万字

            // 非空判断
            if (username && userpwd) {
                // 拿到cookie 
                const cookies = document.cookie;
                let arr = cookies.split('; ') ;   // 多一个空格
                console.log(arr);   // ['ww=222','cc=123']
                arr = arr.map( v => {
                    const arr2 = v.split('=') ;
                    return {
                        username : arr2[0] , 
                        userpwd : arr2[1]
                    }
                }) 
                // 判断用户名是否存在 --- 找满足条件的数据 filter
                const res = arr.filter( v => {
                    return v.username === username
                }) ; // 数组
                const resObj = res[0] ;
                console.log(res);
                if(resObj) {
                    // 判断密码
                    if(resObj.userpwd === userpwd) {
                        alert("登录成功");


                        // 记录当前登录的账户信息
                        document.cookie = 'login_user=' + username + ';path=/;expires=' + new Date() ;

                        location.href = './08index.html' ;
                    } else {
                        alert('用户名或密码错误') ;
                    }
                } else {
                    alert('用户名不存在')
                }
            }

        })




        // ['ww=222','cc=123']

        // [
        //     {
        //         username : 'ww' ,
        //         userpwd : '222'
        //     } ,
        //     {
        //         username : 'cc' , 
        //         userpwd : '123'
        //     }
        // ]






    </script>

</body>

</html>